import React, { memo,Component } from 'react'
import {getUserInfo} from '@/api/user'
import {baseUrl} from '../../assets/baseUrl'
import { Avatar } from 'antd'
import { MessageOutlined } from '@ant-design/icons';
const BaseUrl = baseUrl()
class basicControl extends Component{
    constructor(props) {
        super(props);
        this.state = {
            userInfo:null //用来存用户信息
        }
    }
    componentDidMount(){
        getUserInfo().then(res=>{
            let userInfo = res.data.data[0]
            this.setState({
                userInfo,
            })
        })
    }
    render(){
        const {userInfo} = this.state
        return (
            <div
                className='w-1/4' 
                style={{
                    height:'80vh',
                    minWidth:'300px',
                    padding:'40px 40px',
                    position:'fixed',
                }}
            >
                <div className='flex border-solid border-yellow-400 border-b-2 pb-2'>
                    {
                        userInfo?.headPicUrl ? <img src={BaseUrl+userInfo?.headPicUrl} alt="" style={{
                            width:64,
                            height:64,
                            borderRadius:'50%',
                            border:'none'
                        }}/>: <img src={BaseUrl+'headpic.png'} alt="" style={{
                            width:64,
                            height:64,
                            borderRadius:'50%',
                            border:'1px solid white'
                        }}/>
                    }
                    <div className='text-lg' style={{
                        paddingTop:'35px',
                        paddingLeft:'10px',
                        fontWeight:550
                    }}>{userInfo?.nickName}</div>
                </div>
                <div style={{
                    fontWeight:500
                }}>
                    <div className='flex py-5'>
                        <i className="iconfont icon-message mr-7" style={{color:'yellow'}}></i>
                        <div className='font-medium text-lg'>未读消息</div>
                    </div>
                    <div className='flex py-5'>
                        <i className="iconfont icon-youjian mr-7" style={{color:'yellow'}}></i>
                        <div className='font-medium text-lg'>@我</div>
                    </div>
                    <div className='flex py-5'>
                        <i className="iconfont icon-tangguobang mr-7" style={{color:'yellow'}}></i>
                        <div className='font-medium text-lg'>我的糖</div>
                    </div>
                    <div className='flex py-5'>
                        <i className="iconfont icon-zuoye mr-7" style={{color:'yellow'}}></i>
                        <div className='font-medium text-lg'>我的作业</div>
                    </div>
                    <div className='flex py-5'>
                        <i className="iconfont icon-weituoshu mr-7" style={{color:'yellow'}}></i>
                        <div className='font-medium text-lg'>我的委托</div>
                    </div>
                    <div className='flex py-5'>
                        <i className="iconfont icon-gongzuo mr-7" style={{color:'yellow'}}></i>
                        <div className='font-medium text-lg'>我的工作</div>
                    </div>
                </div>
            </div>
          )
    }
}
export default memo(basicControl)
